<template>
	<view class="invite u-skeleton">
		<u-navbar title="邀请好友" :background="{
			'backgroundColor':'#fff'
		}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		<view class="invite-topbg u-skeleton-rect" :style="{
			'background-image':'url(' + $util.img(info.image) + ')'
		}">
		</view>
		<view class="info-content u-skeleton-rect">
			<view class="box-title">
				<view class="left">
					<view class="i-title">{{info.title}}</view>
					<view class="i-tips">{{info.subtitle}}</view>
				</view>
				<view class="right" @click="$util.redirectTo('/pages/my/Invitation')"> 
					<text>邀请规则</text>
					<u-icon name="arrow-right" color="rgba(0,0,0,.6)"></u-icon>
				</view>
			</view>
			<view class="boxitem">
				<view class="item">
					<view class="num">{{info.today_count}}</view>
					<view class="txt">今日奖励</view>
				</view>
				<view class="item">
					<view class="num">{{info.total_count}}</view>
					<view class="txt">累计奖励</view>
				</view>
			</view>
		</view>
		
		<view class="invite-num u-skeleton-rect">
			<view class="title" @click="$util.redirectTo('/pages/tidalcard/myfriend')">
				<view class="name">我邀请的好友</view>
				<view class="num">
					<text>好友{{info.people_count}}人</text>
					<u-icon name="arrow-right" size='24' color='#000000'></u-icon>
				</view>
			</view>
			<u-button class="btn-primary u-skeleton-rect" @click="tolink" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">邀请好友 获得丰厚奖励</u-button>
		</view>
		
		<view class="invite-bottom u-skeleton-rect">
			<view class="title">
				<view class="name">我的邀请人</view>
			</view>
			<view class="ib-bottom">
				<!-- <input type="text" placeholder="" :disabled='true'> -->
				<u-button class="tow-primary u-skeleton-rect" @click="mymineShow = true" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">点击查看</u-button>
			</view>
		</view>
		
		<diy-My-inviter :mymineShow = "mymineShow" @close ='mymineShow = false'></diy-My-inviter>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import diyMyInviter from "../../components/diy-My-inviter/diy-my-inviter.vue"
	export default {
		components:{diyMyInviter},
		data(){
			return {
				// 首次进入加载
				loding: true,
				//当前页面的数据
				info:{},
				//好友弹窗
				mymineShow:false,
				//基础配置
				baseConfig:{}
			}
		},
		onShow() {
			this.getinfo();
		},
		methods:{
			tolink(){
				this.$util.redirectTo('/pages/my/poster')
			},
			getinfo(){
				this.$http.asyncSendrequest({
					url:'/profile/inviteConfig',
					success:res=>{
						this.info = res.data;
						this.loding = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invite{
		.invite-topbg{
			height: 362rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.info-content{
			height: 358rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: -108rpx 30rpx 20rpx;
			padding: 40rpx 34rpx;
			box-sizing: border-box;
			.box-title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 70rpx;
				.left{
					flex: 7;
					.i-title{
						margin-bottom: 20rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					.i-tips{
						
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
				.right{
					flex: 2;
					color: rgba(0,0,0,.6);
					display: flex;
					align-items: center;
					font-size: 24rpx;
					text{
						margin-right: 10rpx;
					}
				}
			}
			
			.boxitem{
				display: flex;
				align-items: center;
				justify-content: space-around;
				.item{
					.num{
						text-align: center;
						margin-bottom: 18rpx;
					}
					.txt{
						text-align: center;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
			}
		}
		.invite-num{
			height: 250rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx 34rpx;
			box-sizing: border-box;
			margin: 0 30rpx;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}
				.num{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					text{
						margin-right: 22rpx;
					}
				}
			}
			.btn-primary {
				height: 96rpx;
				background: #292929;
				border-radius: 10rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				margin-top: 44rpx;
			}
		}
		.invite-bottom{
			height: 250rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx 34rpx;
			box-sizing: border-box;
			margin: 20rpx 30rpx;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}
			.ib-bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 32rpx;
				input{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
			.tow-primary{
				width: 100%;
				height: 96rpx;
				background: #292929;
				border-radius: 10rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
			}
		}
		
	}

</style>